import React, { Component } from 'react'
import { Swiper } from 'react-vant';
const Mock = require("mockjs");

const images = [
  'https://img.yzcdn.cn/vant/apple-1.jpg',
  'https://img.yzcdn.cn/vant/apple-2.jpg',
  'https://img.yzcdn.cn/vant/apple-3.jpg',
  'https://img.yzcdn.cn/vant/apple-4.jpg',
  'https://img.yzcdn.cn/vant/apple-5.jpg',
  'https://img.yzcdn.cn/vant/apple-6.jpg',
  'https://img.yzcdn.cn/vant/apple-7.jpg',
  'https://img.yzcdn.cn/vant/apple-8.jpg',
];

// 文本数据 
const data = Mock.mock({
  "list|15": [{
    "title": "@ctitle(4,5)",
    "msg": "@ctitle(60)"
  }]
})
export class FindHouse extends Component {
  render() {
    return (
      <div>
        {/* ❤ 一、轮播图  */}
        <Swiper autoplay={1000}>
          {
            images.length ?
              images.map((item, index) => {
                return <Swiper.Item key={index}>
                  <img src={item} alt="" />
                </Swiper.Item>
              }) : "暂无数据"
          }
        </Swiper>
        <ul>
          {/* ❤ 二、 数据列表渐变  */}
          {
            data.list.length ?
              data.list.map((item, index) => {
                return <li key={index} className="item"
                  // style={{background:`#${data.list.length-index}${data.list.length-index}${data.list.length-index}`}} //颜色由浅到深【数组长度小于等于9】
                  style={{ background: `rgb(${255 - index * 15},${255 - index * 15},${255 - index * 15})` }} 
                  //颜色由浅到深,用rgb(${255-index*倍数},${255-index*倍数},${255-index*倍数})
                >
                  <h4>{item.title}</h4>
                  <p className='txt'>{item.msg}</p>
                </li>
              }) : "暂无数据"
          }
        </ul>

      </div>
    )
  }
}

export default FindHouse